import React from 'react'
import './MyTabBarStyle.less'
import { TabBar } from 'antd-mobile'
import { useNavigate, useLocation } from 'umi'
import Icon from '../Icon/Icon'


export default function MyTabBar() {

    const navigate = useNavigate()
    const location = useLocation()

    const tabs = [
        {
            key: '/home',
            title: (active: boolean) => (
                // 错误点注意 小括号就不用return
                active ? <span style={{ color: '#e93323' }}>首页</span> : <span>首页</span>
            ),
            icon: (active: boolean) => (
                <Icon name="shouye1" size={22} color={active ? '#e93323' : '#333'} />
            )
        },
        {
            key: '/cate',
            title: (active: boolean) => {
                return active ? <span style={{ color: '#e93323' }}>分类</span> : <span>分类</span>
            },
            icon: (active: boolean) => (
                <Icon name="fenlei" size={22} color={active ? '#e93323' : '#333'} />
            )
        },
        {
            key: '/cart',
            title: (active: boolean) => {
                return active ? <span style={{ color: '#e93323' }}>购物车</span> : <span>购物车</span>
            },
            icon: (active: boolean) => (
                <Icon name="gouwuche" size={22} color={active ? '#e93323' : '#333'} />
            )
        },
        {
            key: '/user',
            title: (active: boolean) => {
                return active ? <span style={{ color: '#e93323' }}>我的</span> : <span>我的</span>
            },
            icon: (active: boolean) => (
                <Icon name="wode" size={22} color={active ? '#e93323' : '#333'} />
            )
        },
    ]

    // 激活色 并跳转路由
    const changeTab = (key: string) => {
        navigate(key)
    }

    return (
        <div className='MyTabBar'>
            <TabBar
                onChange={
                    changeTab
                }
                activeKey={location.pathname}
            >
                {
                    tabs.map(tab => (
                        <TabBar.Item
                            key={tab.key}
                            icon={tab.icon}
                            title={tab.title}
                        />
                    ))
                }
            </TabBar>
        </div >
    )
}
